<template>
  <div class="container">
    <div style="padding:10px 10px;background: white;">
      <div style="display: flex;align-items: center;">
        <div style="width: 10px;height: 35px;background: #0060bf;">
        </div>
        <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">存量风险数据变化统计</div>
        <div style="margin-left: 10px;">更新时间:2025年3月1日</div>
      </div>
      <div
          style="display: flex;align-items: center;width: 100%;margin-top: 10px;padding-left: 20px;
          justify-content: start;">
        <div style="display:flex;height: 30px;width: 70%;">
          <div style="flex: 1;background: #c71f30;display: flex;align-items: center;justify-content: center;">
            <img src="@/assets/方向粗箭头-向上.png" style="width: 10px;height: 20px;" alt="">
            <span style="color: white;margin-left: 10px;">20条</span>
          </div>
          <div style="flex: 3;background: #92d14f;display: flex;align-items: center;justify-content: center;">
            <img src="@/assets/方向粗箭头-向右.png" style="width: 10px;height: 20px;" alt="">
            <span style="color: white;margin-left: 10px;">59条</span>
          </div>
          <div
              style="flex: 1;background: #afabaa;display: flex;align-items: center;justify-content: center;color: white;">
            <img src="@/assets/横线.png" style="width: 30px;height: 8px;" alt="">
            <span style="color: white;margin-left: 10px;">18条</span>
          </div>
        </div>
        <div style="width: 200px;margin-left: 50px;">
          <div style="display: flex;align-items: center;justify-content: space-around;">
            <div style="width: 10px;height: 10px;border-radius: 50%;background:#c71f30;"></div>
            <div style="color: #c71f30;">风险上升：</div>
            <div style="color: #c71f30;">20条</div>
          </div>
          <div style="display: flex;align-items: center;justify-content: space-around;margin-top: 5px;">
            <div style="width: 10px;height: 10px;border-radius: 50%;background:#92d14f;"></div>
            <div style="color: #92d14f;">风险下降：</div>
            <div style="color: #92d14f;">59条</div>
          </div>
          <div style="display: flex;align-items: center;justify-content: space-around;margin-top: 5px;">
            <div style="width: 10px;height: 10px;border-radius: 50%;background:#afabaa;"></div>
            <div style="color: #afabaa;">风险不变：</div>
            <div style="color: #afabaa;">18条</div>
          </div>
        </div>
      </div>
    </div>

    <div style="padding:10px 10px;background: white;margin-top: 5px;">
      <div style="display: flex;align-items: center;">
        <div style="width: 10px;height: 35px;background: #0060bf;">
        </div>
        <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">新增风险数据分课题统计</div>
        <div style="margin-left: 10px;">更新时间:2025年3月1日</div>
      </div>
    </div>

    <div style="margin-top: 5px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div style="background: white;">
            <div style="height: 100px;">
              <div class="title-left">重要案件风险</div>
              <div class="right-count count1">37条</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;margin-right: 10px;">
              <el-progress :percentage="customProcess[0].percentage" :color="customProcess[0].color"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="background: white;">
            <div style="height: 100px;">
              <div class="title-left">违规事件风险</div>
              <div class="right-count count2">78条</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;margin-right: 10px;">
              <el-progress :percentage="customProcess[1].percentage" :color="customProcess[1].color"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="background: white;">
            <div style="height: 100px;">
              <div class="title-left">办案节点风险</div>
              <div class="right-count count3">55条</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;margin-right: 10px;">
              <el-progress :percentage="customProcess[2].percentage" :color="customProcess[2].color"></el-progress>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="background: white;">
            <div style="height: 100px;">
              <div class="title-left">人员廉政风险</div>
              <div class="right-count count4">18条</div>
            </div>
            <div style="margin-top: 20px;margin-left: 20px;margin-right: 10px;">
              <el-progress :percentage="customProcess[3].percentage" :color="customProcess[3].color"></el-progress>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 5px;height: calc(100vh - -385px);background: white;">
      <el-row :gutter="20">
        <el-col :span="17">
          <div style="background: white;">
            <div style="padding:5px 10px;background: white;">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">累计风险数据趋势统计</div>
                <div style="margin-left: 10px;">更新时间: 2025年3月1日</div>
              </div>
            </div>
          </div>
          <div style="height: calc(100vh - 130px);">
            <div id="main" style="height: 100%; width:  100%;"></div>
          </div>
        </el-col>
        <el-col :span="7">
          <div style="background: white;">
            <div style="padding:5px 10px;background: white;">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">累计风险数据总计</div>
              </div>
            </div>
          </div>
          <div style="background: white;padding-top: 5px;">
            <div class="charts-right-div">
              <div class="right-card">
                <div style="font-size: 20px;padding-left: 10px;padding-top: 10px;">重要案件风险</div>
                <div style="height: 100px;">
                  <img src="@/assets/echart_1.png" style="width: 120px;height: 90px;">
                  <div
                      style="float: right;margin-left: 50px;font-size: 28px;font-weight: 600;margin-top: 30px;width: 100px;">
                    <img src="@/assets/echart_1_up.png" style="width: 20px;height: 20px;">
                    <span>150</span>
                  </div>
                </div>
              </div>
              <div class="right-card">
                <div style="font-size: 20px;padding-left: 10px;padding-top: 10px;">违规事件风险</div>
                <div style="height: 100px;">
                  <img src="@/assets/echart_2.png" style="width: 120px;height: 90px;">
                  <div
                      style="float: right;margin-left: 50px;font-size: 28px;font-weight: 600;margin-top: 30px;width: 100px;">
                    <img src="@/assets/echart_2_up.png" style="width: 20px;height: 20px;">
                    <span>187</span>
                  </div>
                </div>
              </div>
              <div class="right-card">
                <div style="font-size: 20px;padding-left: 10px;padding-top: 10px;">办案节点风险</div>
                <div style="height: 100px;">
                  <img src="@/assets/echart_3.png" style="width: 120px;height: 90px;">
                  <div
                      style="float: right;margin-left: 50px;font-size: 28px;font-weight: 600;margin-top: 30px;width: 100px;">
                    <img src="@/assets/echart_3_up.png" style="width: 20px;height: 20px;">
                    <span>221</span>
                  </div>
                </div>
              </div>
              <div class="right-card">
                <div style="font-size: 20px;padding-left: 10px;padding-top: 10px;">人员廉政风险</div>
                <div style="height: 100px;">
                  <img src="@/assets/echart_4.png" style="width: 120px;height: 90px;">
                  <div
                      style="float: right;margin-left: 50px;font-size: 28px;font-weight: 600;margin-top: 30px;width: 100px;">
                    <img src="@/assets/echart_4_down.png" style="width: 20px;height: 20px;">
                    <span>52</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";

export default {
  mounted() {
    this.addLog()
    this.initCharts();
  },
  computed: {},
  data() {
    return {
      customProcess: [
        {color: '#006df0', percentage: 20},
        {color: '#933ec5', percentage: 40},
        {color: '#65b12d', percentage: 30},
        {color: '#d80027', percentage: 10}
      ]
    }
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件风险数据'
      obj.content = '查看了【风险数据报告】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    initCharts() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['8月', '9月', '10月', '11月', '12月', '1月', '2月']
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          show: true,
          textStyle: {
            color: '#000000',
            fontSize: 16
          },
          top: 20,
          left: 20,
          itemHeight: 16,
          icon: 'circle',
          data: ['课题一', '课题二', '课题三', '课题四']
        },
        series: [
          {
            name: '课题一',
            data: [75, 100, 68, 200, 160, 132, 150],
            type: 'line',
            smooth: true,
            symbol: 'circle', // 显示圆形符号
            symbolSize: 8 // 设置符号的大小
          },
          {
            name: '课题二',
            data: [61, 130, 79, 75, 190, 145, 187],
            type: 'line',
            smooth: true,
            symbol: 'circle', // 显示圆形符号
            symbolSize: 8 // 设置符号的大小
          },
          {
            name: '课题三',
            data: [30, 75, 69, 140, 130, 88, 221],
            type: 'line',
            smooth: true,
            symbol: 'circle', // 显示圆形符号
            symbolSize: 8 // 设置符号的大小
          },
          {
            name: '课题四',
            data: [5, 35, 46, 78, 100, 60, 52],
            type: 'line',
            smooth: true,
            symbol: 'circle', // 显示圆形符号
            symbolSize: 8 // 设置符号的大小
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
};
</script>
<style scoped>

.charts-right-div {
  height: 500px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  justify-content: space-between;
}


.right-card {
  background: #ffffff;
  width: 356px;
  height: 280px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}


.count1 {
  color: #006df0;
}

.count2 {
  color: #933ec5;
}

.count3 {
  color: #65b12d;
}

.count4 {
  color: #d80027;
}

.title-left {
  float: left;
  font-size: 20px;
  margin-left: 15px;
  padding: 5px;
}

.right-count {
  float: right;
  font-size: 30px;
  padding-top: 50px;
  margin-right: 10px;

}

.first-div {
  height: 170px;
  display: flex;
  justify-content: space-between;
}

.top-card {
  height: 150px;
  background: #ffffff;

  width: calc(25% - 15px);
}


.top-div {
  background: white;
  padding: 10px;
}

.second-top-div {
  background: white;
  min-width: 1200px;
  height: 50px;
  padding: 10px;
}


.container {
  width: 100%;
  height: 100vh;
  display: block;
  clear: both;
  background: #f7f8fa;
  overflow: auto;
}

.clearfix:after {
  clear: both
}


</style>